<template>
    <div class="participant wrap-table satisfation-table">
        <!---->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="转为怀孕期" name="zero">
                <el-form ref="form" :model="searchData" label-width="100px" class="clearfix" style="margin-top: 20px;">
                    <el-form-item label="反馈时间"  label-width="70px" class="pull-left" style="width: 325px;">
                        <div class="block">
                            <el-date-picker
                                    v-model="timeDate"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="searchData.period==2" label="胎心B超确认情况" label-width="130px" class="pull-left item-right" style="width: 220px;">
                        <el-select v-model="searchData.isUltrasonicChecked" clearable placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已确认" value="1"></el-option>
                            <el-option label="待确认" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="APP中转组完成" label-width="130px"  class="pull-left item-right" style="width: 220px;">
                        <el-select v-model="searchData.isTransfored" clearable placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已完成" value="1"></el-option>
                            <el-option label="待完成" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="试验类型" class="pull-left item-right" style="width:260px">
                        <el-select v-model="searchData.testType" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in options6"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="pull-left" label-width="30px">
                        <el-input v-model="searchData.keyWord" style="width: 250px;" placeholder="请输入研究对象手机号、研究编号">
                        </el-input>
                    </el-form-item>
                    <!-- 操作区域 -->
                    <div class="pull-right pd-lr30">
                        <el-button @click="searchHandler" type="primary" class="pd-lr30">查询</el-button>
                    </div>
                </el-form>
                <template>
                    <el-table
                            :data="tableData"
                            border
                            id="out-table"
                            :height="maxHeight"
                            v-loading="loading"
                            element-loading-text="加载中"
                            style="width: 100%;">
                        <el-table-column
                                prop="Surname"
                                label="姓名首字母"
                                align="center"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                label="手机号"
                                align="center"
                                min-width="90">
                            <template slot-scope="scope">
                                <el-tooltip :content="scope.row.Mobile" placement="top">
                                    <span class="click_line" @click="JumpUserinfo(scope.row)">{{scope.row.Mobile |mobileFilter}}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="ResearchNo"
                                label="研究编号"
                                align="center"
                                min-width="80">
                        </el-table-column>
                        <el-table-column
                                prop="CreateTime"
                                :show-overflow-tooltip="true"
                                label="反馈时间"
                                align="center"
                                min-width="120">
                        </el-table-column>
                        <el-table-column
                                prop="IsUltrasonicChecked"
                                :show-overflow-tooltip="true"
                                label="胎心B超确认情况"
                                align="center"
                                min-width="120">
                            <template  slot-scope="scope">
                                <el-select v-model="scope.row.IsUltrasonicChecked" placeholder="请选择" @change="changeIsUltrasonicChecked(scope.row,scope.row.IsUltrasonicChecked)">
                                    <el-option label="已确认" value="1"></el-option>
                                    <el-option label="待确认" value="2"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="Nurse"
                                :show-overflow-tooltip="true"
                                label="确认人员"
                                align="center"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                prop="ConfirmTime"
                                :show-overflow-tooltip="true"
                                label="确认时间"
                                align="center"
                                min-width="120">
                        </el-table-column>
                        <el-table-column
                                prop="IsTransfored"
                                label="APP中转组完成"
                                :formatter="GroupTypeFilter"
                                align="center"
                                min-width="120">
                        </el-table-column>
                        <el-table-column
                                prop="OpName"
                                :show-overflow-tooltip="true"
                                label="操作人员"
                                align="center"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                prop="OpTime"
                                :show-overflow-tooltip="true"
                                label="操作时间"
                                align="center"
                                min-width="120">
                        </el-table-column>
                    </el-table>
                </template>
                <!--分页-->
                <div class="block mg-20-auto pagination-fixed">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageId"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="转为儿童期(CH1)" name="first">
                <el-form ref="form" :model="searchData" label-width="100px" class="clearfix" style="margin-top: 20px;">
                    <el-form-item label="反馈时间"  label-width="70px" class="pull-left" style="width: 325px;">
                        <div class="block">
                            <el-date-picker
                                    v-model="timeDate"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item  label="确认宝宝出生" label-width="130px"
                                  class="pull-left item-right" style="width: 220px;">
                        <el-select v-model="searchData.isUltrasonicChecked" clearable placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已确认" value="1"></el-option>
                            <el-option label="待确认" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="APP中转组完成" label-width="130px"  class="pull-left item-right" style="width: 220px;">
                        <el-select v-model="searchData.isTransfored" clearable placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已完成" value="1"></el-option>
                            <el-option label="待完成" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="试验类型" class="pull-left item-right" style="width:260px">
                        <el-select v-model="searchData.testType" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in options6"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="pull-left" label-width="30px">
                        <el-input v-model="searchData.keyWord" style="width: 250px;" placeholder="请输入研究对象手机号、研究编号">
                        </el-input>
                    </el-form-item>
                    <!-- 操作区域 -->
                    <div class="pull-right pd-lr30">
                        <el-button @click="searchHandler" type="primary" class="pd-lr30">查询</el-button>
                    </div>
                </el-form>
                <template>
                    <el-table
                            :data="tableData"
                            border
                            id="out-table"
                            :height="maxHeight"
                            v-loading="loading"
                            element-loading-text="加载中"
                            style="width: 100%;">
                        <el-table-column
                                prop="Surname"
                                label="姓名首字母"
                                align="center"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                label="手机号"
                                align="center"
                                min-width="100">
                            <template slot-scope="scope">
                                <el-tooltip :content="scope.row.Mobile" placement="top">
                                    <span class="click_line" @click="JumpUserinfo(scope.row)">{{scope.row.Mobile |mobileFilter}}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="ResearchNo"
                                label="研究编号"
                                align="center"
                                min-width="80">
                        </el-table-column>
                        <el-table-column
                                prop="FeedbackPerson"
                                label="反馈人员"
                                align="center"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                prop="CreateTime"
                                :show-overflow-tooltip="true"
                                label="反馈时间"
                                align="center"
                                min-width="120">
                        </el-table-column>
                        <el-table-column
                            prop="IsUltrasonicChecked"
                            :show-overflow-tooltip="true"
                            label="确认宝宝出生"
                            align="center"
                            min-width="100">
                            <template  slot-scope="scope">
                                <el-select v-model="scope.row.IsUltrasonicChecked" placeholder="请选择"
                                    @change="checkChildren(scope.row,scope.row.IsUltrasonicChecked)">
                                    <el-option label="已确认" value="1"></el-option>
                                    <el-option label="待确认" value="2"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="Nurse"
                                :show-overflow-tooltip="true"
                                label="确认人员"
                                align="center"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                prop="ConfirmTime"
                                :show-overflow-tooltip="true"
                                label="确认时间"
                                align="center"
                                min-width="120">
                        </el-table-column>
                        <el-table-column
                                prop="IsTransfored"
                                label="APP中转组完成"
                                :formatter="GroupTypeFilter"
                                align="center"
                                min-width="120">
                        </el-table-column>
                        <el-table-column
                                prop="OpName"
                                :show-overflow-tooltip="true"
                                label="操作人员"
                                align="center"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                prop="OpTime"
                                :show-overflow-tooltip="true"
                                label="操作时间"
                                align="center"
                                min-width="120">
                        </el-table-column>
                    </el-table>
                </template>
                <!--分页-->
                <div class="block mg-20-auto pagination-fixed">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageId"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <!---->
             <el-tab-pane label="转为儿童期(CH2)" name="second">
                <el-form ref="form" :model="searchData" label-width="100px" class="clearfix" style="margin-top: 20px;">
                    <el-form-item label="转组时间"  label-width="70px" class="pull-left" style="width: 325px;">
                        <div class="block">
                            <el-date-picker
                                    v-model="timeDate"
                                    type="daterange"
                                    align="right"
                                    unlink-panels
                                    range-separator="至"
                                    value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="试验类型" class="pull-left item-right" style="width:260px">
                        <el-select v-model="searchData.testType" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in options6"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="pull-left" label-width="30px">
                        <el-input v-model="searchData.keyWord" style="width: 250px;" placeholder="请输入研究对象手机号、研究编号">
                        </el-input>
                    </el-form-item>
                    <!-- 操作区域 -->
                    <div class="pull-right pd-lr30">
                        <el-button @click="searchHandler" type="primary" class="pd-lr30">查询</el-button>
                    </div>
                </el-form>
                <template>
                    <el-table
                            :data="tableData"
                            border
                            id="out-table"
                            :height="maxHeight"
                            v-loading="loading"
                            element-loading-text="加载中"
                            style="width: 100%;">
                        <el-table-column
                                prop="Surname"
                                label="姓名首字母"
                                align="center"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                label="手机号"
                                align="center"
                                min-width="100">
                            <template slot-scope="scope">
                                <el-tooltip :content="scope.row.Mobile" placement="top">
                                    <span class="click_line" @click="JumpUserinfo(scope.row)">{{scope.row.Mobile |mobileFilter}}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="ResearchNo"
                                label="研究编号"
                                align="center"
                                min-width="80">
                        </el-table-column>
                        <el-table-column
                                prop="ChildIntensityOfIntervention"
                                label="CH1干预强度"
                                align="center"
                                 :formatter="InIntensityFilter"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                prop="Child2IntensityOfIntervention"
                                label="CH2干预强度"
                                align="center"
                                 :formatter="InIntensityFilter"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                prop="CH1ToCH2Time"
                                :show-overflow-tooltip="true"
                                label="转组日期"
                                align="center"
                                min-width="120">
                        </el-table-column>
                        <el-table-column
                                prop="OpName"
                                :show-overflow-tooltip="true"
                                label="操作人员"
                                align="center"
                                min-width="70">
                        </el-table-column>
                        <el-table-column
                                prop="OpTime"
                                :show-overflow-tooltip="true"
                                label="操作时间"
                                align="center"
                                min-width="120">
                        </el-table-column>
                    </el-table>
                </template>
                <!--分页-->
                <div class="block mg-20-auto pagination-fixed">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageId"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
             </el-tab-pane>
        </el-tabs>
        <!---->
    </div>

</template>
<script>
import {mapGetters} from 'vuex'
export default {
    data() {
        return {
            searchData:{
                keyWord:'',
                isUltrasonicChecked:'',
                period:'2',
                isTransfored:'',
                testType:'2'
            },
            activeName: 'zero',
            changeIndex:'0',
            timeDate:[],
            options6: [{value: '', label: '全部'},{value: '0', label: '预试验'},{value: '1', label: '正式试验'},{value: '2', label: '预试验+正式试验'}],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                text: '最近三个月',
                     onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],
            },
            pageId:1,
            total:null,
            loading:true,
            pageSize:10,
            tableData:[],
            maxHeight:'',
            InIntensityFilter(row, column, cellValue, index){
                if(cellValue==undefined){
                    row.InIntensityOfIntervention=''
                }
                if(cellValue=='1'){
                    return 'AA'
                }
                else if(cellValue=='2'){
                    return 'A'
                }
                else{
                    return '-'
                }
            },
            IsUltrasonicChecked(row, column, cellValue, index){
                return cellValue==1?'已确认':cellValue==2?'待确认':'-'
            },
            GroupTypeFilter(row, column, cellValue, index){
                return cellValue=='1'?'已完成':cellValue=='2'?'待完成':'-'
            },
            FillInTimeFilter(row, column, cellValue, index){
                if(cellValue){
                    return cellValue.substring(0,16)
                }
            },
            optionDiq:[],
        }
    },
    beforeMount:function() {
        let that=this;
        let appHeight=$(window).height();
        let autoheight=(appHeight-290)+'px'
        that.maxHeight=autoheight
    },
    computed:{
        ...mapGetters([
                'resechObj',
                'RoleGroup',
                'userIcon',
                'token'
            ]),
    },
    filters:{
        mobileFilter(cellValue) {
            if(cellValue){
                return cellValue.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
            }
        },
    },
    methods: {
        changeIsUltrasonicChecked:function(row){
            let that=this;
            var msg=row.IsUltrasonicChecked=='1'?'已确认':'待确认'
            that.$confirm(`是否将该对象的胎心B超确认情况改为“${msg}”？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.service({
                    url:'/ResearchObject/SaveBUltrasonic',
                    method:'post',
                    data:{
                        ...row,
                        NurseId:that.token,
                        Nurse:that.userIcon
                    }
                }).then(response=>{
                    that.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    that.getList()
                }).catch(data=>{
                    that.getList()
                })
            }).catch(() => {
                that.$message({
                    type: 'info',
                    message: '已取消'
                });
                that.getList()
            });

        },
	    checkChildren(row){   //确认宝宝出生
		    let that=this;
		    let msg=row.IsUltrasonicChecked=='1'?'已确认':'待确认'
		    that.$confirm(`是否将确认宝宝出生改为“${msg}”？`, '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
		    }).then(() => {
			    that.service({
				    url:'/ResearchObject/SaveBUltrasonic',
				    method:'post',
				    data:{
					    ...row,
					    NurseId:that.token,
					    Nurse:that.userIcon
				    }
			    }).then(response=>{
				    that.$message({
					    message: '修改成功',
					    type: 'success'
				    });
				    that.getList()
			    }).catch(data=>{
				    that.getList()
			    })
		    }).catch(() => {
			    that.$message({
				    type: 'info',
				    message: '已取消'
			    });
			    that.getList()
		    });
        },
        JumpUserinfo:function(row){
            let that=this;
            that.$router.push({
                path:'/participant/editor',
                query:{
                    id:row.ResearchObjectId,
                    mobile:row.Mobile,
                    researchNo:row.ResearchNo,
                }
            })
        },
        handleClick(tab, event) {   //切换tab
            let index=parseInt(tab.index)+2
	        this.searchData={
		        keyWord:'',
		        isUltrasonicChecked:'',
		        isTransfored:'',
		        testType:'2'
            }
            this.searchData.period=index
            this.pageId=1;
            this.pageSize=10;
            this.total=null;
            this.getList()
        },
        searchHandler:function(){   //查询
            this.pageId=1;
            this.pageSize=10;
            this.total=null;
            this.getList()
        },
        handleSizeChange(val) {       //条数改变
            this.pageSize=val;
            this.getList()
        },
        handleCurrentChange(val) {    //页数改变
            this.pageId = val
            this.getList()
        },
        getList:function(){           //获取一级信息列表
            let that=this
            that.loading=true
            that.service({
                url:'/ResearchObject/GetTransforPeriod',
                method:'get',
                params:{
                    pageCount:(that.pageId-1),
                    pageSize:that.pageSize,
                    ...that.searchData,
                    startDate:that.timeDate?that.timeDate[0]:'',
                    endDate:that.timeDate?that.timeDate[1]:'',
                 }
            }).then(response=>{
                let arrData=response.dtData;
                that.tableData=arrData;
                that.total =parseInt(response.dtData[0].TotalCount);
                that.loading=false
            }).catch(data=>{
                that.loading=false
            })
        },

    },
    mounted:function(){
        let that=this;
        that.timeDate= [
            '2018-08-01',
            dateForm(new Date())
        ];   //初始化时间范围
        if(that.$route.query.isChild){
	        that.activeName='first'
	        that.searchData.period='3'
        }
	    console.log()
        that.getList()
    }
  }
function addZero(s){
    return s < 10 ? '0' + s: s;
}
function dateForm(data){
    return   new Date(data).getFullYear()+'-'+addZero((new Date(data).getMonth()+1))+'-'+addZero(new Date(data).getDate())
}
</script>
<style scoped lang="scss">
   .iconImg{
       width: 30px;
       height: auto;
       display:inline-block;
   }
   .click_line{cursor: pointer;color:#409EFF;}
    .pagination-fixed{
      position: static;
    }
</style>
